import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import createAutoImport from './vite/plugins/auto-import'

export default defineConfig({
	// 插件配置
	plugins: [vue(), createAutoImport()],
	resolve: {
		// https://cn.vitejs.dev/config/#resolve-alias
		alias: {
			// 设置路径
			'~': path.resolve(__dirname, './'),
			// 设置别名
			'@': path.resolve(__dirname, './src'),
		},
		// https://cn.vitejs.dev/config/#resolve-extensions
		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
	},
	server: {
		//项目启动时自动打开浏览器
		open: true,
		// host: '0.0.0.0',
		//自定义端口
		port: 8080,
		// 是否开启 https
		https: false,
		//开启热加载
		hmr: true,
		// 服务器代理配置
		proxy: {
			'/webApi': {
				target: 'http://112.6.22.23:50049',
				changeOrigin: true,
				rewrite: path => path.replace(/^\/webApi/, ''),
			},
		},
	},
	build: {
		target: 'esnext', //默认'modules'
		assetsInlineLimit: 4096,
		cssCodeSplit: isProd, //默认true, CSS代码拆分
		sourcemap: !isProd,
		minify: isProd ? 'terser' : 'esbuild', // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。
		terserOptions: {
			compress: {
				drop_console: isProd, // 生产环境去除console
				drop_debugger: isProd, // 生产环境去除debugger
			},
		},
		rollupOptions: {
			output: {
				// 最小化拆分包
				manualChunks: {
					// 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。
					vue: ['vue', 'vue-router'],
					elementPlus: ['element-plus'],
				},
				// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
				entryFileNames: 'js/[name].[hash].js',
				// 用于命名代码拆分时创建的共享块的输出命名
				chunkFileNames: 'js/[name].[hash].js',
				// 用于输出静态资源的命名，[ext]表示文件扩展名
				assetFileNames: '[ext]/[name].[hash].[ext]',
			},
		},
	},
	esbuild: {
		jsxFactory: 'h',
		jsxFragment: 'Fragment',
		jsxInject: "import { h } from 'vue';",
	},
})
